/* ================
		flex
================ */
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;

  /* #endif */
  flex-direction: $direction;
}

.com-flex {
  @include flex;

  align-items: center;
}

.com-flex-col {
  @include flex(column);
}

.com-flex-center {
  @include flex;

  align-items: center;
  justify-content: center;
}

.com-flex-wrap {
  flex-wrap: wrap;
}

// justify
.com-justify-center {
  justify-content: center;
}

.com-justify-start {
  justify-content: flex-start;
}

.com-justify-end {
  justify-content: flex-end;
}

.com-justify-between {
  justify-content: space-between;
}

.com-justify-around {
  justify-content: space-around;
}

.com-justify-stretch {
  justify-content: stretch;
}

// justify self
.com-justify-self-center {
  justify-self: center;
}

.com-justify-self-start {
  justify-self: start;
}

.com-justify-self-end {
  justify-self: flex-end;
}

.com-justify-self-stretch {
  justify-self: stretch;
}

// items
.com-items-center {
  align-items: center;
}

.com-items-start {
  align-items: flex-start;
}

.com-items-end {
  align-items: flex-end;
}

.com-items-baseline {
  align-items: baseline;
}

.com-items-stretch {
  align-items: stretch;
}

// items self
.com-items-self-center {
  align-self: center;
}

.com-items-self-start {
  align-self: flex-start;
}

.com-items-self-end {
  align-self: flex-end;
}

.com-items-self-baseline {
  align-self: baseline;
}

.com-items-self-stretch {
  align-self: stretch;
}

// 定义flex等分
@for $i from 0 through 12 {
  .com-flex-#{$i} {
    flex: $i;
  }
}
